<!-- /components/scroll-page.vue -->
<script setup>
  import { computed } from 'vue'
  // 读取页面视口的高度
  const { windowHeight } = uni.getSystemInfoSync()

  // 定义一个变量接收defineProps函数的返回值
  const scrollPageProps = defineProps({
    // 接收一个值默认不显示 , 是否显示边框
    borderStyle: {
      type: [String, Boolean],
      default: false,
    },
    // 背景颜色
    backgroundColor: {
      type: String,
      default: '#FFF',
    },
    // 是否启用下拉刷新
    refresherEnabled: {
      type: Boolean,
      default: false,
    },
    // 是否触发下拉刷新
    refresherTriggered: {
      type: Boolean,
      default: false,
    },
    scrollTop: {
      type: [Number, String],
      default: 0,
    },
  })

  const borderBottomStyle = computed(() => {
    // 如果scrollPageProps.borderStyle为空或者为true，则返回1px solid #e5e5e5
    if (
      scrollPageProps.borderStyle === '' ||
      scrollPageProps.borderStyle === true
    ) {
      return '1px solid #e5e5e5'
    }
    // 否则返回scrollPageProps.borderStyle
    return scrollPageProps.borderStyle
  })

  // 自定义事件
  defineEmits(['refresherrefresh', 'scrolltolower', 'scroll'])
</script>
<script>
  export default {
    name: 'scroll-page',
  }
</script>

<!-- 定义一个可滚动视图，高度为窗口高度 -->
<template>
  <scroll-view
    :scroll-top="scrollPageProps.scrollTop"
    @scroll="$emit('scroll', $event)"
    :style="{
      height: windowHeight + 'px',
      boxSizing: 'border-box',
      borderBottom: scrollPageProps.borderStyle,
      backgroundColor: backgroundColor,
    }"
    scroll-y
    :refresherEnabled="scrollPageProps.refresherEnabled"
    :refresherTriggered="scrollPageProps.refresherTriggered"
    @refresherrefresh="$emit('refresherrefresh', $event)"
    @scrolltolower="$emit('scrolltolower', $event)"
  >
    <view class="scroll-page-content">
      <slot></slot>
    </view>
  </scroll-view>
</template>

<style lang="scss">
  .scroll-page-content {
    // 设置内容容器底部安全区域距离顶部的距离
    padding-bottom: env(safe-area-inset-bottom);
  }
</style>
